<template>
  <div class="container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="User" name="first">User</el-tab-pane>
      <el-tab-pane label="Config" name="second">Config</el-tab-pane>
      <el-tab-pane label="Role" name="third">Role</el-tab-pane>
      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
    </el-tabs>
    <div class="uploadBox">
      <a-upload-dragger
        v-model:fileList="fileList"
        name="file"
        :multiple="true"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        @change="handleChange"
      >
        <p class="ant-upload-drag-icon">
          <inbox-outlined></inbox-outlined>
        </p>
        <p class="ant-upload-text">Click or drag file to this area to upload</p>
        <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
      </a-upload-dragger>
    </div>
  </div>
</template>

<script lang="ts">
import { InboxOutlined } from "@ant-design/icons-vue"
import { message } from "ant-design-vue"
import { defineComponent, ref } from "vue"
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

class FileItem {
  uid: string
  name?: string
  status?: string
  response?: string
  url?: string
}

class FileInfo {
  file: FileItem
  fileList: FileItem[]
}

export default defineComponent({
  name: "uploadData",
  components: {
    InboxOutlined
  },
  setup() {
    const handleChange = (info: FileInfo) => {
      const status = info.file.status
      if (status !== "uploading") {
        console.log(info.file, info.fileList)
      }
      if (status === "done") {
        message.success(`${info.file.name} file uploaded successfully.`)
      } else if (status === "error") {
        message.error(`${info.file.name} file upload failed.`)
      }
    }
    return {
      handleChange,
      fileList: ref([])
    }
  }
})
</script>

<style lang="less">
.container {
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
}
.uploadBox  {
  margin-top: 20px;
  width: 50vw;
  height: 30vh;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
